<template>
  <div class="model-title-box">
    <div class="icon-box">
      <SvgIcon name="connect" width="15px" hight="15px" class="icon"></SvgIcon>
    </div>
    <div class="right-title">
      <h1>{{ title }}</h1>
    </div>
  </div>
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import SvgIcon from '@/components/SvgIcon/index.vue'
import { useResumeJsonStore } from '@/store/resume.ts'
let userResumeStore = useResumeJsonStore()
defineProps<{
  title: string
}>()
</script>
<style lang="scss" scoped>
.model-title-box {
  display: flex;
  align-items: center;
  position: relative;
  left: -30px;
  .icon-box {
    background: v-bind(
      'userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.themeColor'
    );
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }
  .right-title {
    h1 {
      font-size: v-bind(
        'userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.firstTitleFontSize'
      );
      color: v-bind(
        'userResumeStore.resumeJsonNewStore.GLOBAL_STYLE.themeColor'
      );
    }
  }
}
</style>
